<template>
  <div class="container">
    <router-view v-slot="{ Component }">
      <transition mode="out-in"> 
      <!-- <keep-alive> -->
         <component :is="Component" />
      <!-- </keep-alive> -->
    </transition> 
    </router-view>
    
  </div>
</template>

<style lang="less">

* {
  margin: 0;
  position: 0;
  box-sizing: border-box;
  font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;
}
html,
body,
.container {
  height: 100vh;
  background-color: rgb(244, 244, 244);
}
// icon选中样式
.active{
	color: rgb(246, 93, 23);
}

//组件切换动画
.v-enter-active {
    opacity: 1;
   transition: all .1s ease;
 }
 .v-enter{
    transform: translateY(10px);
     opacity: 0.5;
 }
 .v-leave-active{
   transition: all 1s ease;
 }
 .v-leave-to{
   transform: translateY(40px);
   opacity: 0;
 }
 .page-middle{
     flex-grow: 1;
   overflow: auto;
 }


</style>
